<template>
	<view>
		<view class="tonghhj_view">
			<view :class="tabindex == 0 ? 'shujutji':'shujutjis'" @click="gettab(0)">
				数据统计
			</view>
			<view :class="tabindex == 1 ? 'shujutji':'shujutjis'" @click="gettab(1)">
				客户情况
			</view>
		</view>
		<view class="tonghhj_views"></view>
		<view v-if="tabindex == 0">
			<view class="meirishju">
				<view class="meirishju_row">
					<view class="linstrsd"></view>
					<view class="meirishju_name">
						每日数据
					</view>
					<view class="meirishju_dw">
						单位：组
					</view>
					<view class="meirishju_time" @click="show = true">
						{{dayinfasd}}
					</view>
				</view>
				<view class="shuju_felxd" style="margin-top: 28rpx;">
					<view class="shuju_vluome">
						<view class="shuju_shuyju">
							{{shujuds.phoneNumbers == undefined ? 0 :shujuds.phoneNumbers}}
						</view>
						<view class="shuju_shuyjuname">
							来电
						</view>
					</view>
					<view class="linasras"></view>
					<view class="shuju_vluome">
						<view class="shuju_shuyju">
							{{shujuds.visitNumbers == undefined ? 0 :shujuds.visitNumbers}}
						</view>
						<view class="shuju_shuyjuname">
							来访
						</view>
					</view>
					<view class="linasras"></view>
					<view class="shuju_vluome">
						<view class="shuju_shuyju">
							{{shujuds.initiation == undefined ? 0 :shujuds.initiation}}
						</view>
						<view class="shuju_shuyjuname">
							入会
						</view>
					</view>
				</view>
				<view class="shuju_felxd" style="margin-top: 38rpx;">
					<view class="shuju_vluome">
						<view class="shuju_shuyju">
							{{shujuds.subscribe == undefined ? 0 :shujuds.subscribe}}
						</view>
						<view class="shuju_shuyjuname">
							认筹
						</view>
					</view>
					<view class="linasras"></view>
					<view class="shuju_vluome">
						<view class="shuju_shuyju">
							{{shujuds.reserveSmall == undefined ? 0 :shujuds.reserveSmall}}
						</view>
						<view class="shuju_shuyjuname">
							小定
						</view>
					</view>
					<view class="linasras"></view>
					<view class="shuju_vluome">
						<view class="shuju_shuyju">
							{{shujuds.reserveBig == undefined ? 0 :shujuds.reserveBig}}
						</view>
						<view class="shuju_shuyjuname">
							大定
						</view>
					</view>
				</view>
			</view>
			<view class="meirishju" style="margin-top: 20rpx;">
				<view class="meirishju_row">
					<view class="linstrsd"></view>
					<view class="meirishju_name">
						合计数据
					</view>
					<view class="meirishju_dw">
						单位：组
					</view>
				</view>
				<view class="shuju_felxd" style="margin-top: 28rpx;">
					<view class="shuju_vluome">
						<view class="shuju_shuyju">
							{{shujud.phoneNumbers == undefined ? 0 :shujud.phoneNumbers}}
						</view>
						<view class="shuju_shuyjuname">
							来电
						</view>
					</view>
					<view class="linasras"></view>
					<view class="shuju_vluome">
						<view class="shuju_shuyju">
							{{shujud.visitNumbers  == undefined ? 0 :shujud.visitNumbers}}
						</view>
						<view class="shuju_shuyjuname">
							来访
						</view>
					</view>
					<view class="linasras"></view>
					<view class="shuju_vluome">
						<view class="shuju_shuyju">
							{{shujud.initiation == undefined ? 0 :shujud.initiation}}
						</view>
						<view class="shuju_shuyjuname">
							入会
						</view>
					</view>
				</view>
				<view class="shuju_felxd" style="margin-top: 38rpx;">
					<view class="shuju_vluome">
						<view class="shuju_shuyju">
							{{shujud.subscribe == undefined ? 0 :shujud.subscribe}}
						</view>
						<view class="shuju_shuyjuname">
							认筹
						</view>
					</view>
					<view class="linasras"></view>
					<view class="shuju_vluome">
						<view class="shuju_shuyju">
							{{shujud.reserveSmall == undefined ? 0 :shujud.reserveSmall}}
						</view>
						<view class="shuju_shuyjuname">
							小定
						</view>
					</view>
					<view class="linasras"></view>
					<view class="shuju_vluome">
						<view class="shuju_shuyju">
							{{shujud.reserveBig == undefined ? 0 :shujud.reserveBig}}
						</view>
						<view class="shuju_shuyjuname">
							大定
						</view>
					</view>
				</view>
			</view>
			<view class="meirishjus">
				<view class="meirishju_row">
					<view class="linstrsd"></view>
					<view class="meirishju_name">
						成交统计
					</view>
					<view class="meirishju_dw">
						成交：套/货值：元
					</view>
				</view>
				<view class="shuju_tj_row">
					<view class="shuju_tj_rows">
						<view class="shuju_tj_cloumd">
							<view class="shuju_tj_name">
								总成交
							</view>
						</view>
						<view class="shuju_tj_shuju">
							564
						</view>
					</view>
					<view class="shuju_tj_rows">
						<view class="shuju_tj_cloumd">
							<view class="shuju_tj_name">
								总货值
							</view>
						</view>
						<view class="shuju_tj_shuju">
							0
						</view>
					</view>
					<view class="shuju_tj_rows">
						<view class="shuju_tj_cloumd">
							<view class="shuju_tj_name">
								总回款
							</view>
						</view>
						<view class="shuju_tj_shuju">
							860,000
						</view>
					</view>
				</view>
				<view class="fantuabn_felx">
					<view class="fantuabn_felx_row">
						<image src="https://star.googom.cn/chuangge/gaoceng.png" mode="" class="gaoceng"></image>
						<view class="rowsad">
							<view class="gc_name">
								高层
							</view>
							<view class="gc_nshuju">
								270
							</view>
						</view>
						<view class="rowsad">
							<view class="gc_names">
								货值
							</view>
							<view class="gc_nshujus">
								0
							</view>
						</view>
					</view>
					<view class="fantuabn_felx_row">
						<image src="https://star.googom.cn/chuangge/lianpai.png" mode="" class="gaoceng"></image>
						<view class="rowsad">
							<view class="gc_name">
								洋房
							</view>
							<view class="gc_nshuju">
								170
							</view>
						</view>
						<view class="rowsad">
							<view class="gc_names">
								货值
							</view>
							<view class="gc_nshujus">
								0
							</view>
						</view>
					</view>
					<view class="fantuabn_felx_row">
						<image src="https://star.googom.cn/chuangge/deipion.png" mode="" class="gaoceng"></image>
						<view class="rowsad">
							<view class="gc_name">
								叠拼
							</view>
							<view class="gc_nshuju">
								170
							</view>
						</view>
						<view class="rowsad">
							<view class="gc_names">
								货值
							</view>
							<view class="gc_nshujus">
								0
							</view>
						</view>
					</view>
				</view>
				<view class="fantuabn_felx" style="margin-top: 16rpx;">
					<view class="fantuabn_felx_row">
						<image src="https://star.googom.cn/chuangge/yangfang.png" mode="" class="gaoceng"></image>
						<view class="rowsad">
							<view class="gc_name">
								联排
							</view>
							<view class="gc_nshuju">
								270
							</view>
						</view>
						<view class="rowsad">
							<view class="gc_names">
								货值
							</view>
							<view class="gc_nshujus">
								0
							</view>
						</view>
					</view>
					<view class="fantuabn_felx_row">
						<image src="https://star.googom.cn/chuangge/shangshu.png" mode="" class="gaoceng"></image>
						<view class="rowsad">
							<view class="gc_name">
								商墅
							</view>
							<view class="gc_nshuju">
								170
							</view>
						</view>
						<view class="rowsad">
							<view class="gc_names">
								货值
							</view>
							<view class="gc_nshujus">
								0
							</view>
						</view>
					</view>
					<view class="fantuabn_felx_row">
						<image src="https://star.googom.cn/chuangge/shangpou.png" mode="" class="gaoceng"></image>
						<view class="rowsad">
							<view class="gc_name">
								商铺
							</view>
							<view class="gc_nshuju">
								170
							</view>
						</view>
						<view class="rowsad">
							<view class="gc_names">
								货值
							</view>
							<view class="gc_nshujus">
								0
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="meirishjuss">
				<view class="meirishju_row">
					<view class="linstrsd"></view>
					<view class="meirishju_name">
						来电来访
					</view>
					<view class="meirishju_dw">
						单位：人/本月
					</view>
					<view class="tab_virws">
						<view :class="tabindexs == 0 ? 'zhioyu':'zhioyus' " @click="gettabs(0)">
							周
						</view>
						<view :class="tabindexs == 1 ? 'zhioyu':'zhioyus' " @click="gettabs(1)">
							月
						</view>
					</view>
				</view>
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :canvas2d="true" :ontouch="true" class="iasmdafa"/>
			</view>
		</view>
		<view v-if="tabindex == 1">
			<view class="meirishjuss">
				<view class="meirishju_row">
					<view class="linstrsd"></view>
					<view class="meirishju_name">
						电转访
					</view>
					<view class="meirishju_dw">
						单位：组
					</view>
				</view>
				<view class="bingtu_flex">
					<qiun-data-charts type="pie" :opts="optsssss" :chartData="chartDatasssss" :canvas2d="true" class="iasgfads"/>
				</view>
			</view>
			<view class="meirishjuss">
				<view class="meirishju_row">
					<view class="linstrsd"></view>
					<view class="meirishju_name">
						意向产品
					</view>
					<view class="meirishju_dw">
						单位：组
					</view>
				</view>
				<view class="bingtu_flex">
					<qiun-data-charts type="pie" :opts="optcp" :chartData="chartDatacp" :canvas2d="true" class="iasgfads"/>
				</view>
			</view>
			<view class="meirishjuss">
				<view class="meirishju_row">
					<view class="linstrsd"></view>
					<view class="meirishju_name">
						客户职业
					</view>
					<view class="meirishju_dw">
						单位：组
					</view>
				</view>
				<view class="bingtu_flex">
					<qiun-data-charts type="pie" :opts="optzy" :chartData="chartDatazy" :canvas2d="true" class="iasgfads"/>
				</view>
			</view>
		</view>
		<view class="bolckss"></view>
		<u-datetime-picker :show="show" v-model="value1" mode="date" ref="datetimePicker" @confirm="confirm"
			@close="show=false" :closeOnClickOverlay="true" :closeOnClickAction="true" @cancel="cancel"
			:formatter="formatter" :maxDate="Number(new Date())"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isgosem:false,
				projectnameid:0,
				tabindex: 0,
				tabindexs: 0,
				show: false,
				value1: Number(new Date()),
				dayinfasd: '',
				chartData: {},
				shujud:{},
				shujuds:{},
				opts: {
					color: ["#05CF67", "#A89AD7","#DC8FB1"," #EAAE61"," #947964"," #43D2EB" ],
					padding: [15, 15, 0, 5],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							seriesGap: 5,
							barBorderCircle: true,
							type: "group",
							width: 16,
							activeBgColor: "#000000",
							activeBgOpacity: 0.01
						}
					}
				},
				chartDatasssss: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				optsssss: {
					color: ["#05CF67", "#A89AD7","#DC8FB1"," #EAAE61"," #947964"," #43D2EB"  ],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				chartDatacp:{},
				optcp: {
					color: ["#05CF67", "#A89AD7","#DC8FB1"," #EAAE61"," #947964"," #43D2EB"  ],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				chartDatazy:{},
				optzy: {
					color: ["#05CF67", "#A89AD7","#DC8FB1"," #EAAE61"," #947964"," #43D2EB" ],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
			this.getServerData();
			this.getServerDatasss();
			this.getServerDatacp();
			this.getServerDatazy();
		},
		onShow() {
			var taht = this
			var token = uni.getStorageSync('token');
			taht.projectnameid = uni.getStorageSync('projectnameid');
			if (token == '' || token == null || token == undefined) {
				taht.isgosem = true
			} else {
				taht.isgosem = false
				//获取合计数据
				taht.getNumberss()
				taht.getFormattedDate()
			}
		},
		methods: {
			//每日数据
			async getNumbersss(){
				var that = this
				let data = await that.$api.getNumbers({
					projectId:that.projectnameid,
					beginDate:that.dayinfasd,
					endDate:that.dayinfasd
				});
				if (data.code == 200) {
					that.shujuds = data.data
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			//合计数据
			async getNumberss(){
				var that = this
				let data = await that.$api.getNumbers({
					projectId:that.projectnameid,
				});
				if (data.code == 200) {
					that.shujud = data.data
				} else {
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
				}
			},
			//柱状图
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["第一周", "第二周", "第三周", "第四周"],
						series: [{
							name: "来访",
							data: [35, 36, 31, 33]
						}, {
							name: "来电",
							data: [35, 36, 31, 33]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			//电转访
			getServerDatasss() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "来电",
								"value": 128,
							}, {
								"name": "来访",
								"value": 36,
							}]
						}]
					};
					this.chartDatasssss = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			//意向产品
			getServerDatacp(){
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "高层",
								"value": 128,
							}, {
								"name": "洋房",
								"value": 36,
							}, {
								"name": "叠拼",
								"value": 36,
							}, {
								"name": "联排",
								"value": 36,
							}, {
								"name": "商墅",
								"value": 36,
							}, {
								"name": "商铺",
								"value": 36,
							}]
						}]
					};
					this.chartDatacp = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			//客户职业
			getServerDatazy(){
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "上班",
								"value": 128,
							}, {
								"name": "个体",
								"value": 36,
							}, {
								"name": "教育",
								"value": 36,
							}, {
								"name": "事业单位",
								"value": 36,
							}, {
								"name": "医疗",
								"value": 36,
							},{
								"name": "物业",
								"value": 36,
							}]
						}]
					};
					this.chartDatazy = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			//点击tab
			gettab(e) {
				this.tabindex = e
			},
			//成交统计点击
			gettabs(e) {
				this.tabindexs = e
			},
			//获取当前时间
			getFormattedDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，转为1-12并补零
				const day = String(date.getDate()).padStart(2, '0'); // 日期补零
				this.dayinfasd = `${year}-${month}-${day}`
				//获取每日数据
				this.getNumbersss()
			},
			//选择时间
			confirm(e) {
				this.show = false
				this.result(e.value, e.mode)
			},
			cancel() {
				this.show = false
			},
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat
				const data = timeFormat(time, 'yyyy-mm-dd')
				let str = data;
				this.dayinfasd = str
				//获取每日数据
				this.getNumbersss()
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			end() {
				
			}
		}
	}
</script>

<style lang="scss">
	.tonghhj_view {
		width: 702rpx;
		height: 72rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx;
		background: #F5F7FB;
		margin-left: 24rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		padding-left: 4rpx;
		padding-right: 4rpx;
		box-sizing: border-box;

		.shujutji {
			width: 347rpx;
			height: 64rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 12rpx;
			background: #FFFFFF;
			font-size: 28rpx;
			font-weight: bold;
			color: #05CF67;
		}

		.shujutjis {
			width: 347rpx;
			height: 64rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 12rpx;
			background: transparent;
			font-size: 28rpx;
			font-weight: bold;
			color: #08112C;
		}
	}

	.tonghhj_views {
		width: 702rpx;
		height: 72rpx;
		background-color: #FFFFFF;
	}
	
	.iasgfads{
		width: 702rpx;
	}

	.meirishjuss {
		width: 702rpx;
		border-radius: 20rpx;
		background: #F5F7FB;
		box-sizing: border-box;
		border: 2rpx solid #FFFFFF;
		margin-left: 24rpx;
		margin-top: 20rpx;
		padding-bottom: 15rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		.meirishju_row {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin-top: 26rpx;
			margin-bottom: 30rpx;

			.linstrsd {
				width: 4rpx;
				height: 32rpx;
				border-radius: 116rpx;
				background: #05CF67;
				margin-left: 24rpx;
			}

			.meirishju_name {
				font-size: 30rpx;
				font-weight: bold;
				color: #08112C;
				margin-left: 12rpx;
			}

			.meirishju_dw {
				font-size: 26rpx;
				color: #485A75;
				margin-left: 12rpx;
			}

			.tab_virws {
				width: 248rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 12rpx;
				background: rgba(41, 87, 155, 0.05);
				margin-left: 100rpx;

				.zhioyu {
					width: 120rpx;
					height: 52rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-radius: 12rpx;
					background: #FFFFFF;
					font-size: 28rpx;
					font-weight: bold;
					color: #05CF67;
				}

				.zhioyus {
					width: 120rpx;
					height: 52rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-radius: 12rpx;
					background: transparent;
					font-size: 28rpx;
					font-weight: bold;
					color: #485A75;
				}
			}
		}

		.bingtu_flex {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.biont_flex {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-bottom: 15rpx;

				.biont_flex_nam {
					width: 302rpx;
					height: 96rpx;
					border-radius: 20rpx;
					background: #FFFFFF;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					.nansheng {
						width: 28rpx;
						height: 28rpx;
						border-radius: 6rpx;
						background: #05CF67;
						margin-left: 24rpx;
					}

					.nansheng_name {
						font-size: 28rpx;
						font-weight: bold;
						color: #08112C;
						margin-left: 16rpx;
					}

					.nansheng_shuju {
						width: 110rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #08112C;
						margin-left: 16rpx;
					}

					.nansheng_shujus {
						font-size: 28rpx;
						font-weight: bold;
						color: #05CF67;
					}
				}

				.biont_flex_nams {
					width: 302rpx;
					height: 96rpx;
					border-radius: 20rpx;
					background: #FFFFFF;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					margin-left: 24rpx;

					.nansheng {
						width: 28rpx;
						height: 28rpx;
						border-radius: 6rpx;
						background: #A89AD7;
						margin-left: 24rpx;
					}

					.nansheng_name {
						font-size: 28rpx;
						font-weight: bold;
						color: #08112C;
						margin-left: 16rpx;
					}

					.nansheng_shuju {
						width: 110rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #08112C;
						margin-left: 16rpx;
					}

					.nansheng_shujus {
						font-size: 28rpx;
						font-weight: bold;
						color: #A89AD7;
					}
				}
			}
		}
	}

	.meirishjus {
		width: 702rpx;
		height: 722rpx;
		border-radius: 20rpx;
		background: #F5F7FB;
		box-sizing: border-box;
		border: 2rpx solid #FFFFFF;
		margin-left: 24rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		.meirishju_row {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin-top: 26rpx;

			.linstrsd {
				width: 4rpx;
				height: 32rpx;
				border-radius: 116rpx;
				background: #05CF67;
				margin-left: 24rpx;
			}

			.meirishju_name {
				font-size: 30rpx;
				font-weight: bold;
				color: #08112C;
				margin-left: 12rpx;
			}

			.meirishju_dw {
				font-size: 26rpx;
				color: #485A75;
				margin-left: 12rpx;
			}
		}

		.shuju_tj_row {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-top: 50rpx;
			padding-left: 16rpx;
			padding-right: 16rpx;
			box-sizing: border-box;

			.shuju_tj_rows {
				width: 188rpx;
				height: 95rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
			}

			.shuju_tj_cloumd {
				width: 188rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;

				.shuju_tj_name {
					font-size: 26rpx;
					color: #08112C;
				}
			}

			.shuju_tj_shuju {
				font-size: 44rpx;
				font-weight: bold;
				color: #08112C;
			}
		}

		.fantuabn_felx {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-top: 34rpx;
			padding-left: 16rpx;
			padding-right: 16rpx;
			box-sizing: border-box;

			.fantuabn_felx_row {
				width: 212rpx;
				height: 200rpx;
				border-radius: 20rpx;
				background: #FFFFFF;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				padding-top: 20rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				box-sizing: border-box;

				.gaoceng {
					width: 56rpx;
					height: 56rpx;
				}

				.rowsad {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-top: 16rpx;

					.gc_name {
						font-size: 28rpx;
						font-weight: bold;
						color: #08112C;
					}

					.gc_names {
						font-size: 24rpx;
						color: #485A75;
					}

					.gc_nshuju {
						font-size: 30rpx;
						font-weight: bold;
						color: #08112C;
					}

					.gc_nshujus {
						font-size: 24rpx;
						color: #485A75;
					}
				}
			}
		}
	}

	.meirishju {
		width: 702rpx;
		border-radius: 20rpx;
		background: #F5F7FB;
		box-sizing: border-box;
		border: 2rpx solid #FFFFFF;
		margin-left: 24rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding-bottom: 26rpx;

		.meirishju_row {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin-top: 26rpx;

			.linstrsd {
				width: 4rpx;
				height: 32rpx;
				border-radius: 116rpx;
				background: #05CF67;
				margin-left: 24rpx;
			}

			.meirishju_name {
				font-size: 30rpx;
				font-weight: bold;
				color: #08112C;
				margin-left: 12rpx;
			}

			.meirishju_dw {
				font-size: 26rpx;
				color: #485A75;
				margin-left: 12rpx;
			}

			.meirishju_time {
				font-size: 26rpx;
				color: #485A75;
				margin-left: 244rpx;
			}
		}

		.shuju_felxd {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			.shuju_vluome {
				width: 234rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;

				.shuju_shuyju {
					font-size: 44rpx;
					font-weight: bold;
					color: #08112C;
				}

				.shuju_shuyjuname {
					font-size: 26rpx;
					color: #08112C;
					margin-top: 8rpx;
				}
			}

			.linasras {
				width: 2rpx;
				height: 40rpx;
				background: rgba(41, 87, 155, 0.1);
			}
		}
	}
	.iasmdafa {
		width: 690rpx;
		margin-left: 10rpx;
	}
</style>